<template>
      <el-button type="primary" @click="router.push({ name: 'MaterialAdd'})">新增</el-button>
      <el-button type="success" @click="UpdProduct()" >修改</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary" @click="Exuport()">导出</el-button>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="清单主题">
      <el-input v-model="formInline.MSubject"  clearable />
    </el-form-item>
    <el-form-item label="清单编号">
      <el-input v-model="formInline.MaterialNode"  clearable />
    </el-form-item>
    <el-form-item label="产品名称">
      <el-input v-model="formInline.MPName"  clearable />
    </el-form-item>
    <el-form-item label="添加人员">
      <el-input v-model="formInline.AddName"  clearable />
    </el-form-item>
    <el-form-item label="添加日期">
        <div class="block">
      <el-date-picker
        v-model="formInline.STime"
        type="date"
        placeholder="Pick a Date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    -
    <div class="block">
      <el-date-picker
        v-model="formInline.LTime"
        type="date"
        placeholder="Pick a Date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    </el-form-item>
    <el-button type="primary" @click="Show">查询</el-button>
</el-form>



<span style="font-size: 24px; font-weight:250; margin-bottom: 10px; display: flex; justify-content: center; align-items: center">物料清单列表</span>

<el-table :data="tableData" style="width:1000px"  @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="mSubject" label="物料清单主题" width="180" />
    <el-table-column prop="materialNode" label="物料清单编码" width="180" />
    <el-table-column  label="主辅清单" >
        <template #default="scope">
        <sapan >辅</sapan>
      </template>
    </el-table-column>
    <el-table-column prop="pName" label="产品名称" />
    <el-table-column  label="制单日期" >
        <template #default="scope">
        <sapan >{{ scope.row.addTime.substring(0,10)}}</sapan>
      </template>
    </el-table-column>
    <el-table-column prop="mWatchmakers" label="制单人员" />
  </el-table>
   
   <!-- 分页 -->
   <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes"
                    :total="formInline.totalCount">
                    <span> , 每页 {{ formInline.pageSize }} 条，当前 {{ formInline.pageIndex }} / {{ formInline.pageCount }} 页</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="formInline.totalCount">
                    <el-button :disabled="formInline.pageIndex == 1" @click="formInline.pageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="formInline.totalCount">
                    <el-button :disabled="formInline.pageIndex == formInline.pageCount"
                        @click="formInline.pageIndex = formInline.pageCount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

</template>
<script setup lang="ts">
import http from '../../../http.js'
import {ref,onMounted,reactive} from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute} from 'vue-router'
import * as XLSX from 'xlsx';
const router = useRouter()
const route = useRoute()
onMounted(() => {
    Show();
})
const formInline= reactive({
    MSubject: '',
    MaterialNode: 0,
    MPName:'',
    AddName:'',
    STime:'',
    LTime:'',
    Office_Id:1,
    pageIndex:1,
    pageSize:5,
    totalCount:0,
    pageCount:0
})
const tableData= ref([])

const Show= () => {
    console.log(formInline)
    axios.get(http.zblnb+'/sc/api/Material/MaterialShow',{
        params:{
            Office_Id:formInline.Office_Id,
            pageIndex:formInline.pageIndex,
            pageSize:formInline.pageSize,
            MSubject:formInline.MSubject,
            MaterialNode:formInline.MaterialNode,
            MPName:formInline.MPName,
            AddName:formInline.AddName,
            STime:  formInline.STime,
            LTime:formInline.LTime
        }
        
    }).then(res => {
        console.log(res.data.data.list)
        tableData.value = res.data.data.list
        formInline.totalCount = res.data.data.totalcount
        formInline.pageCount = res.data.data.pagecount
    })

}

//多选框赋值
const check1 = ref([])
const handleSelectionChange = (val: User[]) => {
    check1.value = val
    console.log(check1.value)
}

//修改
const UpdProducts=ref({})
const UpdProduct = () => {
    if (check1.value.length == 0) {
        ElMessage.error('请选择要修改的数据');
        return
    }
    if (check1.value.length >1) {
        ElMessage.error('要修改的数据只能选择一条');
        return
    }
    UpdProducts.value = check1.value[0]
    console.log(UpdProducts.value)
    router.push("MaterialUpd?id="+UpdProducts.value.materialId)
}


//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check1.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '物料清单主题','物料清单编码','产品名称','制单日期','制单人员']
            ]
            check1.value.forEach((item, index) => {
                let rowData = []
              //  导出内容的字段
                rowData = [
                    index + 1,
                    item.mSubject,
                    item.materialNode,
                    item.pName,
                    item.addTime,
                    item.mWatchmakers
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '采购退货') // 工作簿名称
            let name = '采购退货' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

</script>